<!-- Inject all styles to use them directly -->
<div ng-repeat="variant in fontItem.variants" css-code variant="variant" font-item="fontItem" folder-prefix="folderPrefix"
  type="{styleTag:true}"></div>

<div cg-busy="{promise: loadingPromise, message: loadingMessage}">
  <div ng-hide="busy">
    <div class="row">
      <div class="col-sm-12">
        <h1 style="font-family:{{fontItem.variants[0].fontFamily}},'Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:400; font-style:{{fontItem.variants[0].fontStyle}};">{{fontItem.family}}<br/><small>{{fontItem.category}}</small></h1>
      </div>
    </div>
    <div class="row">

      <div class="col-sm-6">
        <h5>
          <ng-pluralize count="fontItem.variants.length" when="{'0': 'no style',
                           'one': '{} style',
                           'other': '{} styles'}">
          </ng-pluralize>&nbsp;<small><span ng-repeat="variant in fontItem.variants">{{variant.id}}{{$last ? "" : ", "}}</span></small></h5>
        <h5>
          <ng-pluralize count="fontItem.subsets.length" when="{'0': 'no charsets',
                           'one': '{} charset',
                           'other': '{} charsets'}">
          </ng-pluralize>&nbsp;<small><span ng-repeat="subset in fontItem.subsets">{{subset}}{{$last ? "" : ", "}}</span></small></h5>
      </div>

      <div class="col-sm-6">
        <h5>Rank {{fontItem.popularity}}&nbsp;<small>in popularity of {{fonts.length}} fonts in total</small></h5>
        <h5>Last modified {{fontItem.lastModified}}&nbsp;<small>({{fontItem.version}})</small></h5>
      </div>

    </div>

    <!-- character set customization -->
    <div>
      <hr>
      <h4>1. Select charsets:&nbsp;<small>(default is <code>{{fontItem.defSubset}}</code>)</small></h4>
      <div class="subsetGroup">
        <label class="checkbox-inline" ng-repeat="(key,value) in fontItem.subsetMap">
          <input type="checkbox" ng-model="fontItem.subsetMap[key]" name="key" ng-click="subsetSelect(); requiresReload=true;" data-ng-disabled="checkSubsetMinimalSelection(key)">{{key}}
        </label>
      </div>
    </div>

  </div>


  <div class="fontVariant" ng-hide="busy" cg-busy="{promise: subsetsChkbTimeoutP, message: customizationReloadMessage}">
    <!-- FONT VARIANT BEGINS -->

    <!-- styles set customization -->
    <div>
      <hr>

      <h4>2. Select styles:&nbsp;<small>(default is <code>{{fontItem.defVariant}}</code>)</small></h4>

      <div id="fontStyleControl" class="form-inline folderPrefixBar">
        <div class="row">
          <div class="col-xs-5">
            <div id="previewFontSizeInput" class="input-group">
              <span class="input-group-addon">Preview size</span>
              <input class="form-control input-sm" type="number" ng-model="fontSize" placeholder="16" ng-init="fontSize=16" aria-describedby="px-addon">
              <span class="input-group-addon" id="px-addon">px</span>
            </div>
          </div>
          <div class="col-xs-5">
            <div class="btn-group" role="group">
              <button class="btn btn-default btn-sm" ng-click="fontSize = fontSize - 1">-</button>
              <button class="btn btn-default btn-sm" ng-click="fontSize = fontSize + 1">+</button>
            </div>
            <span class="text-muted">&nbsp;Sample text editable.</span>
          </div>
        </div>
      </div>

      <div id="fontStylePreviewChooser">
        <div ng-repeat="variant in fontItem.variants">
          <dl class="dl-horizontal variantList">
            <dt>
              <label class="checkbox-inline">
                <input type="checkbox" ng-model="variantsMap[variant.id]" name="variant.id" data-ng-disabled="checkVariantMinimalSelection(variant.id)" ng-click="variantSelect();"><span class="">{{variant.id}}</span>
              </label>
            </dt>
            <dd>
              <p style="font-family:{{variant.fontFamily}}; font-weight:{{variant.fontWeight}}; font-style:{{variant.fontStyle}}; font-size:{{fontSize > 0 ? fontSize : 16}}px;"
                contenteditable>The quick brown fox jumps over the lazy dog.</p>
            </dd>
          </dl>
        </div>
      </div>

    </div>

    <!-- css snippets -->
    <div class="fontItemCSSWrap">

      <h4>3. Copy CSS:&nbsp;<small>(default is <code>Modern Browsers</code>)</small></h4>

      <tabset type="pills">
        <tab heading="Modern Browsers" select="modernSupportActive();">
          <p class="small">Choose <code>Modern Browsers</code> if supporting old browsers is not relevant. Formats in this snippet: <code>[{{fontFormats}}]</code></p>

          <div ng-click="selectText($event)" class="cssCodeStyle">
            <div ng-repeat="variant in fontItem.variants | filter:variantFilter" css-code variant="variant" font-item="fontItem" folder-prefix="folderPrefix"
              type="{modernSupport:true}"></div>
          </div>

          <div class="form-inline folderPrefixBar small">Customize folder prefix (optional):&nbsp;
            <div class="form-group">
              <input class="form-control input-sm" type="text" ng-model="folderPrefix" placeholder="no folder prefix" ng-init="folderPrefix='../fonts/'"
                value="../fonts/">
            </div>
          </div>
          <p class="small">Click on code to select all statements, then copy/paste it into your own CSS file.</p>
        </tab>
        
        <tab heading="Legacy Support" select="legacySupportActive();">
          <p class="small">Choose <code>Legacy Support</code> if old browsers still need to be supported. Formats in this snippet: <code>[{{fontFormats}}]</code></p>
          
          <div ng-click="selectText($event)" class="cssCodeStyle">
            <div ng-repeat="variant in fontItem.variants | filter:variantFilter" css-code variant="variant" font-item="fontItem" folder-prefix="folderPrefix"
                 type="{legacySupport:true}"></div>
          </div>

          <div class="form-inline folderPrefixBar small">Customize folder prefix (optional):&nbsp;
            <div class="form-group">
              <input class="form-control input-sm" type="text" ng-model="folderPrefix" placeholder="no folder prefix" ng-init="folderPrefix='../fonts/'"
                     value="../fonts/">
            </div>
          </div>
          <p class="small">Click on code to select all statements, then copy/paste it into your own CSS file.</p>
        </tab>
        
        <tab heading="Historic Support" select="historicSupportActive();">
          <p class="small">Choose <code>Historic Support</code> if very old browsers still need to be supported. Formats in this snippet: <code>[{{fontFormats}}]</code></p>
          
          <div ng-click="selectText($event)" class="cssCodeStyle">
            <div ng-repeat="variant in fontItem.variants | filter:variantFilter" css-code variant="variant" font-item="fontItem" folder-prefix="folderPrefix"
                 type="{historicSupport:true}"></div>
          </div>
          
          <div class="form-inline folderPrefixBar small">Customize folder prefix (optional):&nbsp;
            <div class="form-group">
              <input class="form-control input-sm" type="text" ng-model="folderPrefix" placeholder="no folder prefix" ng-init="folderPrefix='../fonts/'"
                     value="../fonts/">
            </div>
          </div>
          <p class="small">Click on code to select all statements, then copy/paste it into your own CSS file.</p>
        </tab>

        <!-- <tab heading="Plain links" class="pull-right">
          <p class="small"><code>Plain links</code> provides a list of all font file urls from Google, ordered by their style. These are the same files that get packed into the archive in the next step (but they do not have meaningful filenames).</p>
          <div ng-repeat="variant in fontItem.variants | filter:variantFilter">
            <h5>{{fontItem.id}}-{{variant.id}} <small>{{fontItem.storeID}}</small></h5>
            <ul>
              <li>eot: <a href="{{variant.eot}}">{{variant.eot}}</a></li>
              <li>woff2: <a href="{{variant.woff2}}">{{variant.woff2}}</a></li>
              <li>woff: <a href="{{variant.woff}}">{{variant.woff}}</a></li>
              <li>ttf: <a href="{{variant.ttf}}">{{variant.ttf}}</a></li>
              <li>svg: <a href="{{variant.svg}}">{{variant.svg}}</a></li>
            </ul>
          </div>
        </tab> -->

      </tabset>
    </div>


    <!-- download button -->
    <div>
      <hr>
      <h4>4. Download files:</h4>
      <p>Your generated archive for <strong>{{fontItem.family}}</strong> with charsets <strong><code>[{{downloadSubSetID}}]</code></strong>        and styles <strong><code>[{{variantDownloadQueryString}}]</code></strong> includes the formats <strong><code>[{{fontFormats}}]</code></strong>.</p>

      <a href="/api/fonts/{{fontItem.id}}?download=zip&amp;subsets={{downloadSubSetID}}&amp;variants={{variantDownloadQueryString}}&formats={{fontFormats}}"
        target="_blank" role="button" class="btn btn-primary download-button"><i class="fa fa-download fa-lg"></i><br/>{{fontItem.id}}-{{fontItem.version}}-{{fontItem.storeID}}.zip</a>
      <p><small>Fonts are copyright of their respective authors.<br><b>See <a target="_blank" href="https://fonts.google.com/attribution">Google Fonts Open Source Font Attribution</a> to find out the specific license that this font uses.</b></small></p>

      <!-- <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
          
        </div>
      </div>
      <div class="row">
        <div class="col-sm-10 col-sm-offset-1">
          
        </div>
      </div> -->



    </div>

    <!-- final instructions -->
    <div>
      <hr>
      <h4>You are now ready to self-host {{fontItem.family}}.<br/>
        <small>If this service has actually been helpful for you, please <a href="https://github.com/majodev/google-webfonts-helper/" target="_blank">star it on GitHub</a>. If you've encountered serious problems, file an issue <a href="https://github.com/majodev/google-webfonts-helper/issues">here</a>.<br />
        ❤️ <a href="https://github.com/sponsors/majodev" target="_blank">You can help to keep this project alive by sponsoring me.</a> Thank you ❤️.</small></h4>
      <hr>
    </div>


  </div>
  <!-- FONT VARIANT ENDS -->



</div>

<div class="apiError" ng-class="{'show': error === true}">
  <h2>API Error ({{errorStatus}})</h2>
  <pre>REQUEST CONFIG: {{errorConfig}}
REQUEST HEADERS: {{errorHeaders}}</pre>
</div>